<template>
	<view class="f20r">
		<view class="disFlex mt20r borRad8s5r overHid">
			<view :class="['poRel', 'h17r', 'flex1',
					item3.isRed || item3.isGray ? 'backCol99c043' : 'backColEcecec'
				]"
				v-for="(item3, index3) in colorAry" :key="index3"
			>
				<text class="poAbs h17r w2r backColDdd bom0 left0"
					v-if="index3 != 0 && !item3.isRed && !item3.isGray"
				></text>
			</view>
		</view>
		<view class="disFlex mt10r">
			<view v-for="(item4, index4) in numAry" :key="index4"
				:class="['flex1', 'poRel',
					index4 == 0 ? 'leftn6r' :
					index4 == 1 ? 'leftn2r' :
					index4 == 2 ? 'left2r' :
					index4 == 3 ? 'left6r' :
					index4 == 4 ? 'left12r' :
					index4 == 5 ? 'left8r' :
					index4 == 6 ? 'left12r' :
					index4 == 7 ? 'left18r' :
					index4 == 8 ? 'left22r' :
					index4 == 9 ? 'left24r' :
					index4 == 10 ? 'left30r' :
					index4 == 11 ? 'left34r' :
					index4 == 12 ? 'left36r' : ''
				]"
			>
				{{item4}}
			</view>
		</view>
		<view class="h30r">
			<text class="disInBlo w30r h30r backCol99c043 poRel top8r mr10r"
			></text>
			<text class="">
				不可预订
			</text>
			<text class="disInBlo w30r h30r backColEcecec poRel top8r mr10r ml40r"
			></text>
			<text class="">
				可预订
			</text>
		</view>
	</view>
</template>
<script>
import { getRoomDetail } from '@/utils/api.js'
import { dateLimit } from '@/utils/utils.js'
export default {
	props: {
		progressObj: {
			type: Object,
			default: {
				tid: { type: String, default: '' },//茶室id
				rid: { type: String, default: '' },//房间id
			}
		}
	},
	data() {
		return {
			numAry: [ 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24 ],
			colorAry: [],
		}
	},
	mounted() {
		this.renovateProgress();
	},
	methods: {
		renovateProgress() {
			this.colorAry = [
				{timeBText: '00:00', timeEText: '00:30', timeBVal: 0, timeEVal: 0.5},
				{timeBText: '00:30', timeEText: '01:00', timeBVal: 0.5, timeEVal: 1},
				{timeBText: '01:00', timeEText: '01:30', timeBVal: 1, timeEVal: 1.5},
				{timeBText: '01:30', timeEText: '02:00', timeBVal: 1.5, timeEVal: 2},
				{timeBText: '02:00', timeEText: '02:30', timeBVal: 2, timeEVal: 2.5},
				{timeBText: '02:30', timeEText: '03:00', timeBVal: 2.5, timeEVal: 3},
				{timeBText: '03:00', timeEText: '03:30', timeBVal: 3, timeEVal: 3.5},
				{timeBText: '03:30', timeEText: '04:00', timeBVal: 3.5, timeEVal: 4},
				{timeBText: '04:00', timeEText: '04:30', timeBVal: 4, timeEVal: 4.5},
				{timeBText: '04:30', timeEText: '05:00', timeBVal: 4.5, timeEVal: 5},
				{timeBText: '05:00', timeEText: '05:30', timeBVal: 5, timeEVal: 5.5},
				{timeBText: '05:30', timeEText: '06:00', timeBVal: 5.5, timeEVal: 6},
				{timeBText: '06:00', timeEText: '06:30', timeBVal: 6, timeEVal: 6.5},
				{timeBText: '06:30', timeEText: '07:00', timeBVal: 6.5, timeEVal: 7},
				{timeBText: '07:00', timeEText: '07:30', timeBVal: 7, timeEVal: 7.5},
				{timeBText: '07:30', timeEText: '08:00', timeBVal: 7.5, timeEVal: 8},
				{timeBText: '08:00', timeEText: '08:30', timeBVal: 8, timeEVal: 8.5},
				{timeBText: '08:30', timeEText: '09:00', timeBVal: 8.5, timeEVal: 9},
				{timeBText: '09:00', timeEText: '09:30', timeBVal: 9, timeEVal: 9.5},
				{timeBText: '09:30', timeEText: '10:00', timeBVal: 9.5, timeEVal: 10},
				{timeBText: '10:00', timeEText: '10:30', timeBVal: 10, timeEVal: 10.5},
				{timeBText: '10:30', timeEText: '11:00', timeBVal: 10.5, timeEVal: 11},
				{timeBText: '11:00', timeEText: '11:30', timeBVal: 11, timeEVal: 11.5},
				{timeBText: '11:30', timeEText: '12:00', timeBVal: 11.5, timeEVal: 12},
				{timeBText: '12:00', timeEText: '12:30', timeBVal: 12, timeEVal: 12.5},
				{timeBText: '12:30', timeEText: '13:00', timeBVal: 12.5, timeEVal: 13},
				{timeBText: '13:00', timeEText: '13:30', timeBVal: 13, timeEVal: 13.5},
				{timeBText: '13:30', timeEText: '14:00', timeBVal: 13.5, timeEVal: 14},
				{timeBText: '14:00', timeEText: '14:30', timeBVal: 14, timeEVal: 14.5},
				{timeBText: '14:30', timeEText: '15:00', timeBVal: 14.5, timeEVal: 15},
				{timeBText: '15:00', timeEText: '15:30', timeBVal: 15, timeEVal: 15.5},
				{timeBText: '15:30', timeEText: '16:00', timeBVal: 15.5, timeEVal: 16},
				{timeBText: '16:00', timeEText: '16:30', timeBVal: 16, timeEVal: 16.5},
				{timeBText: '16:30', timeEText: '17:00', timeBVal: 16.5, timeEVal: 17},
				{timeBText: '17:00', timeEText: '17:30', timeBVal: 17, timeEVal: 17.5},
				{timeBText: '17:30', timeEText: '18:00', timeBVal: 17.5, timeEVal: 18},
				{timeBText: '18:00', timeEText: '18:30', timeBVal: 18, timeEVal: 18.5},
				{timeBText: '18:30', timeEText: '19:00', timeBVal: 18.5, timeEVal: 19},
				{timeBText: '19:00', timeEText: '19:30', timeBVal: 19, timeEVal: 19.5},
				{timeBText: '19:30', timeEText: '20:00', timeBVal: 19.5, timeEVal: 20},
				{timeBText: '20:00', timeEText: '20:30', timeBVal: 20, timeEVal: 20.5},
				{timeBText: '20:30', timeEText: '21:00', timeBVal: 20.5, timeEVal: 21},
				{timeBText: '21:00', timeEText: '21:30', timeBVal: 21, timeEVal: 21.5},
				{timeBText: '21:30', timeEText: '22:00', timeBVal: 21.5, timeEVal: 22},
				{timeBText: '22:00', timeEText: '22:30', timeBVal: 22, timeEVal: 22.5},
				{timeBText: '22:30', timeEText: '23:00', timeBVal: 22.5, timeEVal: 23},
				{timeBText: '23:00', timeEText: '23:30', timeBVal: 23, timeEVal: 23.5},
				{timeBText: '23:30', timeEText: '24:00', timeBVal: 23.5, timeEVal: 24}
			];
			getRoomDetail({
				date: dateLimit(),
				tid: this.progressObj.tid,
				rid: this.progressObj.rid
			}).then(res => {
				// console.log('1111111111111', res)
				let res1Data = res.data;
				this.colorAry.forEach(item1 => {
					if(item1.timeBVal < (new Date().getHours() + (new Date().getMinutes() / 60))) {
						item1.isRed = true;
					}else {
						item1.isRed = false;
					}
					item1.isGray = false;
				})
				if(res1Data && res1Data.end_date_arr && res1Data.end_date_arr.length) {
					let isBeAry2 = [];
					res1Data.end_date_arr.forEach(item1 => {
						let isAddAry = false;
						if(((new Date(item1.start_time).getHours() + new Date(item1.start_time).getMinutes() / 60) % 0.5 != 0) || ((new Date(item1.end_time).getHours() + new Date(item1.end_time).getMinutes() / 60) % 0.5 != 0)) {
							isAddAry = true;
						}
						isBeAry2.push({
							isAddAry,
							isB2BVal: (dateLimit('', new Date(item1.start_time)) == dateLimit() ? (new Date(item1.start_time).getHours() + new Date(item1.start_time).getMinutes() / 60) : 0),
							isB2EVal: (dateLimit('', new Date(item1.end_time)) == dateLimit() ? (new Date(item1.end_time).getHours() + new Date(item1.end_time).getMinutes() / 60) : 24),
							isB2BText: (new Date(item1.start_time).getHours() < 10 ? '0' + new Date(item1.start_time).getHours() : new Date(item1.start_time).getHours()) + ':' + (new Date(item1.start_time).getMinutes() < 10 ? '0' + new Date(item1.start_time).getMinutes() : new Date(item1.start_time).getMinutes()),
							isB2EText: (new Date(item1.end_time).getHours() < 10 ? '0' + new Date(item1.end_time).getHours() : new Date(item1.end_time).getHours()) + ':' + (new Date(item1.end_time).getMinutes() < 10 ? '0' + new Date(item1.end_time).getMinutes() : new Date(item1.end_time).getMinutes())
						})
					})
					isBeAry2.forEach(item1 => {
						this.colorAry.forEach((item2, index2) => {
							if(item1.isAddAry == true && item1.isB2BVal < item2.timeEVal && item1.isB2BVal > item2.timeBVal) {
								item2.isCleaning = false;
								item2.isGray = true;
								item2.isRed = true;
								item2.timeBText = item1.isB2BText;
								item2.timeBVal = item1.isB2BVal;
								if(index2 != 0) {
									this.colorAry[index2 - 1].timeEText = item1.isB2BText;
									this.colorAry[index2 - 1].timeEVal = item1.isB2BVal;
									this.colorAry[index2 - 1].timeBText = ((Math.trunc(item1.isB2BVal - 0.5) < 10 ? '0' + Math.trunc(item1.isB2BVal - 0.5) : Math.trunc(item1.isB2BVal - 0.5)) + ':' + (Math.round((item1.isB2BVal - 0.5 - Math.trunc(item1.isB2BVal - 0.5)) * 60)*100/100));
									this.colorAry[index2 - 1].timeBVal = item1.isB2BVal - 0.5;
									if(index2 != 1) {
										this.colorAry[index2 - 2].timeEText = ((Math.trunc(item1.isB2BVal - 0.5) < 10 ? '0' + Math.trunc(item1.isB2BVal - 0.5) : Math.trunc(item1.isB2BVal - 0.5)) + ':' + (Math.round((item1.isB2BVal - 0.5 - Math.trunc(item1.isB2BVal - 0.5)) * 60)*100/100));
										this.colorAry[index2 - 1].timeEVal = item1.isB2BVal;
									}
								}
							}
							if(item1.isAddAry == true && item1.isB2EVal < item2.timeEVal && item1.isB2EVal > item2.timeBVal) {
								item2.isCleaning = true;
								item2.isGray = false;
								item2.isRed = true;
								item2.timeBText = item1.isB2EText;
								item2.timeBVal = item1.isB2EVal;
								item2.timeEText = ((Math.trunc(item1.isB2EVal + 0.5) < 10 ? '0' + Math.trunc(item1.isB2EVal + 0.5) : Math.trunc(item1.isB2EVal + 0.5)) + ':' + (Math.round((item1.isB2EVal + 0.5 - Math.trunc(item1.isB2EVal + 0.5)) * 60)*100/100));
								item2.timeEVal = item1.isB2EVal + 0.5;
								if(index2 != 0) this.colorAry[index2 - 1].timeEText = item1.isB2EText;
								if(index2 != (this.colorAry.length - 1)) {
									this.colorAry[index2 + 1].timeBText = ((Math.trunc(item1.isB2EVal + 0.5) < 10 ? '0' + Math.trunc(item1.isB2EVal + 0.5) : Math.trunc(item1.isB2EVal + 0.5)) + ':' + (Math.round((item1.isB2EVal + 0.5 - Math.trunc(item1.isB2EVal + 0.5)) * 60)*100/100));
									this.colorAry[index2 + 1].timeBVal = item1.isB2EVal + 0.5;
								}
							}
							if(item2.timeEVal > item1.isB2BVal && item1.isB2EVal > item2.timeBVal) {
								item2.isGray = true;
								item2.isCleaning = false;
								if(index2 != (this.colorAry.length -1)) {
									this.colorAry[index2 + 1].isRed = true;
									this.colorAry[index2 + 1].isCleaning = true;
								}
							}
						})
					})
				}
				if(res1Data && res1Data.start_date_arr && res1Data.start_date_arr.length) {
					let isBeAry1 = [];
					res1Data.start_date_arr.forEach(item1 => {
						let isAddAry = false;
						if(((new Date(item1.start_time).getHours() + new Date(item1.start_time).getMinutes() / 60) % 0.5 != 0) || ((new Date(item1.end_time).getHours() + new Date(item1.end_time).getMinutes() / 60) % 0.5 != 0)) {
							isAddAry = true;
						}
						isBeAry1.push({
							isAddAry,
							isB1BVal: (new Date(item1.start_time).getHours() + new Date(item1.start_time).getMinutes() / 60),
							isB1EVal: (dateLimit('', new Date(item1.end_time)) == dateLimit() ? (new Date(item1.end_time).getHours() + new Date(item1.end_time).getMinutes() / 60) : 24),
							isB1BText: (new Date(item1.start_time).getHours() < 10 ? '0' + new Date(item1.start_time).getHours() : new Date(item1.start_time).getHours()) + ':' + (new Date(item1.start_time).getMinutes() < 10 ? '0' + new Date(item1.start_time).getMinutes() : new Date(item1.start_time).getMinutes()),
							isB1EText: (new Date(item1.end_time).getHours() < 10 ? '0' + new Date(item1.end_time).getHours() : new Date(item1.end_time).getHours()) + ':' + (new Date(item1.end_time).getMinutes() < 10 ? '0' + new Date(item1.end_time).getMinutes() : new Date(item1.end_time).getMinutes())
						})
					})
					isBeAry1.forEach(item1 => {
						this.colorAry.forEach((item2, index2) => {
							if(item1.isAddAry == true && item1.isB1BVal < item2.timeEVal && item1.isB1BVal > item2.timeBVal) {
								item2.isCleaning = false;
								item2.isGray = true;
								item2.isRed = true;
								item2.timeBText = item1.isB1BText;
								item2.timeBVal = item1.isB1BVal;
								if(index2 != 0) {
									this.colorAry[index2 - 1].timeEText = item1.isB1BText;
									this.colorAry[index2 - 1].timeEVal = item1.isB1BVal;
									this.colorAry[index2 - 1].timeBText = ((Math.trunc(item1.isB1BVal - 0.5) < 10 ? '0' + Math.trunc(item1.isB1BVal - 0.5) : Math.trunc(item1.isB1BVal - 0.5)) + ':' + (Math.round((item1.isB1BVal - 0.5 - Math.trunc(item1.isB1BVal - 0.5)) * 60)*100/100));
									this.colorAry[index2 - 1].timeBVal = item1.isB1BVal - 0.5;
									if(index2 != 1) {
										this.colorAry[index2 - 2].timeEText = ((Math.trunc(item1.isB1BVal - 0.5) < 10 ? '0' + Math.trunc(item1.isB1BVal - 0.5) : Math.trunc(item1.isB1BVal - 0.5)) + ':' + (Math.round((item1.isB1BVal - 0.5 - Math.trunc(item1.isB1BVal - 0.5)) * 60)*100/100));
										this.colorAry[index2 - 1].timeEVal = item1.isB1BVal;
									}
								}
							}
							if(item1.isAddAry == true && item1.isB1EVal < item2.timeEVal && item1.isB1EVal > item2.timeBVal) {
								item2.isCleaning = true;
								item2.isGray = false;
								item2.isRed = true;
								item2.timeBText = item1.isB1EText;
								item2.timeBVal = item1.isB1EVal;
								item2.timeEText = ((Math.trunc(item1.isB1EVal + 0.5) < 10 ? '0' + Math.trunc(item1.isB1EVal + 0.5) : Math.trunc(item1.isB1EVal + 0.5)) + ':' + (Math.round((item1.isB1EVal + 0.5 - Math.trunc(item1.isB1EVal + 0.5)) * 60)*100/100));
								item2.timeEVal = item1.isB1EVal + 0.5;
								if(index2 != 0) this.colorAry[index2 - 1].timeEText = item1.isB1EText;
								if(index2 != (this.colorAry.length - 1)) {
									this.colorAry[index2 + 1].timeBText = ((Math.trunc(item1.isB1EVal + 0.5) < 10 ? '0' + Math.trunc(item1.isB1EVal + 0.5) : Math.trunc(item1.isB1EVal + 0.5)) + ':' + (Math.round((item1.isB1EVal + 0.5 - Math.trunc(item1.isB1EVal + 0.5)) * 60)*100/100));
									this.colorAry[index2 + 1].timeBVal = item1.isB1EVal + 0.5;
								}
							}
							if(item2.timeEVal > item1.isB1BVal && item1.isB1EVal > item2.timeBVal) {//优化写法
								item2.isRed = true;
								item2.isGray = true;
								item2.isCleaning = false;
								if(index2 != (this.colorAry.length - 1)) {
									this.colorAry[index2 + 1].isRed = true;
									this.colorAry[index2 + 1].isCleaning = true;
								}
							}
						})
					})
				}
			})
		}
	}
}
</script>
<style>
</style>